<!--
 * @Author: 江沅锋 yuanfeng.jiang@symbio.com.cn
 * @Date: 2024-12-19 15:31:27
 * @LastEditors: 江沅锋 yuanfeng.jiang@symbio.com.cn
 * @LastEditTime: 2024-12-30 18:34:29
 * @FilePath: \snow-frontend-pc\src\views\projects\procurement\centralizedPurchasing\components\associatedItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="visible"
    :title="progressType === 'change' ? '更新进度' : '进度记录'"
    destroy-on-close
    :width="progressType === 'change' ? '500px' : '700px'"
    @close="handleCancel"
  >
    <div class="dialog">
      <div class="changeProgress" v-if="progressType === 'change'">
        <el-form
          :inline="true"
          :model="formInline"
          :rules="rules"
          :label-position="'right'"
          ref="formRef"
          class="demo-form-inline"
          :label-width="'130px'"
        >
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="招采进度" prop="attractProgress">
                <el-select
                  v-model="formInline.attractProgress"
                  placeholder="招采进度"
                  class="width-custom"
                  clearable
                >
                  <el-option
                    class="default-option"
                    v-for="item in attractProgressList"
                    :label="item.dicValue"
                    :key="item.dicCode"
                    :value="item.dicCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="时间" prop="progressFinishTime">
                <el-date-picker
                  class="width-custom"
                  v-model="formInline.progressFinishTime"
                  type="date"
                  placeholder="请选择时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="detailProgress" v-else>
        <el-timeline style="width: 100%">
          <el-timeline-item
            v-for="(item, index) in progressTimeLine"
            :key="item.id"
            :timestamp="item.progressFinishTime"
            :color="index === 0 ? '#0073E5' : '#333333'"
            placement="top"
          >
            <el-card>
              <p>
                <span :class="index === 0 ? 'first' : 'other'">
                  {{ item.attractProgressDesc }}
                </span>
              </p>
              <p class="createTime">
                <span>{{ item.createUserName }}</span>
                <span>{{ item.createTime }}</span>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel"> 取消 </el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          @click="handleSure"
          v-if="progressType === 'change'"
        >
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, watch } from "vue";
import moment from "moment";
import { postDictList } from "/@/api/home";
import { listAttractProgressOp, updateAttractProgress } from "/@/api/projects";
import NotifMessage from "/@/utils/message/notification";
const formRef = ref<HTMLFormElement | null>(null) as any;
const emit = defineEmits(["submit"]);
const visible = ref(false);
const btnLoading = ref<boolean>(false);
const attractProgressList = ref<any>([]);
const progressTimeLine = ref<any>([]);
let formInline = reactive({
  attractProgress: "",
  progressFinishTime: ""
});
const rules = {
  attractProgress: [
    { required: true, message: "请选择招采进度", trigger: "change" }
  ],
  progressFinishTime: [
    { required: true, message: "请选择时间", trigger: "change" }
  ]
};
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  pitchDetail: {
    type: Object,
    default: () => {}
  },
  progressType: {
    type: String,
    default: ""
  }
});
watch(
  () => props.showDialog,
  newVal => {
    visible.value = newVal;
    if (newVal) {
      initData();
    }
  }
);
const initData = () => {
  if (props.progressType === "change") {
    const { attractProgress, attractProgressFinishTime } = props.pitchDetail;
    getDictList("attract_progress");
    formInline.attractProgress = attractProgress
      ? attractProgress.toString()
      : "";
    formInline.progressFinishTime = attractProgressFinishTime || "";
  } else {
    getListAttractProgress();
  }
};
const getDictList = (dicType: string) => {
  postDictList({ dicType }).then((res: any) => {
    const { data, code } = res;
    if (code === 200) {
      switch (dicType) {
        case "attract_progress":
          attractProgressList.value = data || [];
          break;
      }
    }
  });
};
const getListAttractProgress = () => {
  progressTimeLine.value = [];
  listAttractProgressOp({
    id: props.pitchDetail.id
  }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      progressTimeLine.value = data;
    }
  });
};
const handleCancel = () => {
  emit("submit", "cancel");
};
const handleSure = async () => {
  const isValid = await new Promise(resolve => formRef.value.validate(resolve));
  if (!isValid) return;
  const { attractProgress, progressFinishTime } = formInline;
  btnLoading.value = true;
  updateAttractProgress({
    id: props.pitchDetail.id,
    attractProgress,
    progressFinishTime: moment(progressFinishTime).format("YYYY-MM-DD")
  })
    .then((res: any) => {
      if (res.code === 200) {
        NotifMessage.success(`操作成功`);
        emit("submit", "sure");
      }
    })
    .finally(() => {
      btnLoading.value = false;
    });
};
</script>
<style scoped lang="scss">
.dialog {
  width: 100%;
  display: flex;
  border-top: 1px solid #e4e7ed;
  .changeProgress {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    padding: 16px;
  }
  .detailProgress {
    width: 100%;
    height: 500px;
    overflow: auto;
    box-sizing: border-box;
    padding: 16px;
    font-size: 16px;
    .first {
      font-size: 18px;
      font-weight: 900;
      color: #0073e5;
    }
    .other {
      color: #333333;
    }
    .createTime {
      font-size: 12px;
      color: #ccc;
      span {
        margin-right: 8px;
      }
    }
  }
}
.width-custom {
  width: 250px !important;
}
</style>
